﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="ClientSideSelection.aspx.cs" Inherits="ControlExplorer.C1GridView.ClientSideSelection" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1GridView" TagPrefix="wijmo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
    <style type="text/css">
        #demoTable > tbody > tr > td
        {
            vertical-align: top;
            width: 350px;
        }
        
        #logTable
        {
            table-layout: fixed;
            margin-left: 20px;
            width: 100%;
        }
    </style>

    <script type="text/javascript">
        var flag = false;

        function changeClientSelectionMode(value) {
            $('#<%= C1GridView1.ClientID %>').c1gridview("option", "clientSelectionMode", value);
        }

        function onClientSelectionChanged() {
            ensureLogTable();

            var selectedCells = $('#<%= C1GridView1.ClientID %>').c1gridview("selection").selectedCells(),
                log = $("#logTable"),
                i, cellInfo;

            log
                .find("td")
                .removeClass("ui-state-highlight")
                .html("&nbsp");

            for (i = 0; i < selectedCells.length(); i++) {
                cellInfo = selectedCells.item(i);

                $(log[0].tBodies[0].rows[cellInfo.rowIndex()].cells[cellInfo.cellIndex()])
                    .addClass("ui-state-highlight")
                    .text(cellInfo.value().toString());
            }
        }

        function ensureLogTable() {
            if (!flag) {
                var source = document.getElementById("<%= C1GridView1.ClientID %>").tBodies[0],
                    target = document.getElementById("logTable").tBodies[0],
                    i, j, row;

                for (i = 0; i < source.rows.length; i++) {
                    var row = target.insertRow(-1);
                    for (j = 0; j < source.rows[i].cells.length; j++) {
                        row.insertCell(-1).innerHTML = "&nbsp;";
                    }
                }
            }

            flag = true;
        }
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
    
    <table id="demoTable">
        <tr>
            <td>
                <wijmo:C1GridView ID="C1GridView1" runat="server" DataSourceID="SqlDataSource1"
                    AutoGenerateColumns="false" ClientSelectionMode="SingleRow" OnClientSelectionChanged="onClientSelectionChanged">
                    <Columns>
                        <wijmo:C1BoundField DataField="OrderID" HeaderText="ID" />
                        <wijmo:C1BoundField DataField="ShipName" HeaderText="发货源" />
                        <wijmo:C1BoundField DataField="ShipCity" HeaderText="发货城市" />
                    </Columns>
                </wijmo:C1GridView>
            </td>
            <td>
                 <table class="ui-widget ui-widget-content" rules="all" id="logTable">
                     <caption class="ui-widget-header">选择日志 </caption>
                     <colgroup
                        <col width="50" />
                        <col width="200" />
                        <col />
                     </colgroup>
                     <tbody>
                     </tbody>
                 </table>
            </td>
        </tr>
    </table>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|\C1NWind.mdb;Persist Security Info=True"
        ProviderName="System.Data.OleDb" SelectCommand="SELECT TOP 10 [OrderID], [ShipName], [ShipCity] FROM ORDERS">
    </asp:SqlDataSource>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
    <p>
        <strong>C1GridView</strong> 支持客户端单元选择的几种模式。此示例显示了这些模式，
        并演示了如何使用客户端对象模型更改选择模式而不发送请求到服务器。
    </p>

    <p>
        客户端选择是否允许<strong> ClientSelectionMode</strong>属性设置为“无”以外的值
    </p>

    <p>
       选择选择模式，并选择一个或多个行，列，单元格，或范围选择行为。
    </p>
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
    <label for="ddSelectionMode">选择模式&nbsp;</label>
    <select id="ddSelectionMode" onchange="changeClientSelectionMode(this.value)" >
        <option value="none">无</option>
        <option value="singleCell">单个单元格</option>
        <option value="singleColumn">单列</option>
        <option value="singleRow" selected="selected">单行</option>
        <option value="singleRange">单范围</option>
        <option value="multiColumn">多列</option>
        <option value="multiRow">多行</option>
        <option value="multiRange">多范围</option>
    </select>
</asp:Content>
